<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->


<div xmlns="http://www.w3.org/1999/html" tab-scroll>
    <h2 id='configOrderHeader' openlmis-message="label.order.file.format"></h2>

    <form ng-submit="saveOrderFileTemplate()" id="create-order-file-template" name="createOrderFileTemplate" novalidate>
        <div class="app-form" tab-scroll>
            <div class="clearfix form-inline row-fluid">
                <div class="span3">
                    <label for="orderFilePrefix" openlmis-message="label.order.file.prefix"></label>&nbsp;

                    <input ng-model="orderFileTemplate.orderConfiguration.filePrefix" name="orderFilePrefix"
                           id="orderFilePrefix"
                           class="input-small" type="text" maxlength="8"/>

                </div>
                <div class="span4 include-header-form">
                    <input type="checkbox" id="includeHeadersCheckbox"
                           ng-model="orderFileTemplate.orderConfiguration.headerInFile"/>
                    <label for="includeHeadersCheckbox" openlmis-message="label.column.include.headers"></label>
                </div>
            </div>
        </div>

        <hr/>

        <div class="row-fluid">
            <div class="span10">
                <div id="orderColumns">
                    <div class="list-header-container">
                        <div class="row-fluid list-header">
                            <div class="span1">
                                <span class="first-column" openlmis-message="label.include"></span>
                            </div>
                            <div class="span2" openlmis-message="label.data.field"></div>
                            <div class="span2"></div>
                            <div class="span4">
                                <div openlmis-message="label.column.header"></div>
                            </div>
                        </div>
                    </div>

                    <div class="rnr-template-columns">
                        <ul ui-sortable ng-model="orderFileTemplate.orderFileColumns" id="sortable">
                            <li ng-repeat="orderFileColumn in orderFileTemplate.orderFileColumns">
                                <div class="drag-handle"></div>
                                <div class="row-fluid list-row">
                                    <div>
                                        <div class="span1">
                      <span class="first-column checkbox-column">
                        <input id="includeCheckbox{{ $index }}" type="checkbox"
                               ng-model="orderFileColumn.includeInOrderFile"/>
                      </span>
                                        </div>
                                        <div class="span2">
                                            <span openlmis-message="orderFileColumn.dataFieldLabel"></span>
                                        </div>
                                        <div class="span2">
                                            <div class="row-fluid"
                                                 ng-show="orderFileColumn.dataFieldLabel == 'header.order.date'">
                                                <select class="span12" ui-select2 ng-model="orderFileColumn.format"
                                                        ng-options="dateFormat for dateFormat in orderDateFormats">
                                                </select>
                                            </div>
                                            <div class="row-fluid"
                                                 ng-show="orderFileColumn.dataFieldLabel == 'label.period'">
                                                <select class="span12" ui-select2 ng-model="orderFileColumn.format"
                                                        ng-options="dateFormat for dateFormat in periodDateFormats">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="span4">
                                            <input type="text" id="columnHeaderField{{ $index }}"
                                                   ng-model="orderFileColumn.columnLabel"
                                                   maxlength="50"
                                                   ng-disabled="orderFileTemplate.orderConfiguration.headerInFile == false"/>
                                        </div>
                                        <div class="span1">
                                            <a href="" class="remove-row" id="remove{{$index}}"
                                               ng-click="removeOrderFileColumn($index)"
                                               ng-hide="orderFileColumn.openLmisField"
                                               openlmis-message="create.facility.removeProgram"></a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="row-fluid add-new-row-button">
                            <a id='addNewButton' href="" ng-click="addNewOrderFileColumn()"
                               openlmis-message="button.add.new.row"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div form-toolbar id="action_buttons" class="action-buttons">
            <div class="form-cell button-row">
                <input id='saveOrderConfig' type="submit" class="btn btn-primary save-button"
                       openlmis-message="button.save"/>
                <a id='cancelOrderConfig' ng-click="cancelEdiSave()" class="btn btn-cancel cancel-button"
                   openlmis-message="button.cancel"></a>
            </div>

        </div>

    </form>

</div>